import React, { Component } from 'react';
import styles from './index.less';
import { Button } from 'antd';

export default class extends Component {
  componentDidMount = () => {};

  goOpen = () => {
    // 打开一个新窗口
    var newWindow = window.open(
      'http://localhost:8000/postMessageTest2',
      '_blank',
      'width=500,height=500',
    );

    // 检查新窗口是否成功打开
    if (newWindow) {
      // 计算屏幕的中心位置
      var screenCenterX = (screen.width - newWindow.outerWidth) / 2;
      var screenCenterY = (screen.height - newWindow.outerHeight) / 2;

      // 移动窗口到屏幕中心
      newWindow.moveTo(screenCenterX, screenCenterY);

      // 调整窗口的大小（可选）
      newWindow.resizeTo(800, 600); // 设置宽度为800px，高度为600px
    } else {
      // 处理新窗口无法打开的情况
      console.log('无法打开新窗口');
    }

    // 监听message事件接收数据
    window.addEventListener('message', function(event) {
      // 验证消息的来源
      if (event.origin !== 'http://localhost:8000') return;
      // 处理接收到的数据
      var data = event.data;
      console.log(data, '来消息了');
    });
  };

  render() {
    return (
      <div>
        <Button
          type="primary"
          onClick={() => {
            this.goOpen();
          }}
        >
          新开标签页去选择数据
        </Button>
      </div>
    );
  }
}
